<template>
  <dialog ref="el" class="modal" @close="emit('update:modelValue', false)">
    <div ref="content" class="modal-box" :class="boxClass">
      <slot />
    </div>
  </dialog>
</template>
<script setup lang="ts">
import { onClickOutside } from "@vueuse/core";

const el = ref<HTMLDialogElement>();
interface Props {
  modelValue: boolean;
  boxClass?: string;
}
const props = defineProps<Props>();

const emit = defineEmits<{
  "update:modelValue": [value: boolean];
}>();

const content = ref<HTMLElement>();
onClickOutside(content, () => emit("update:modelValue", false));

watch(
  () => props.modelValue,
  (val) => {
    if (val) el.value?.showModal();
    else el.value?.close();
  },
);
</script>
